<template>
	<view class="content" :style="'background:#f7f7f7;'">
		<view class="top-tab-list" :style="'background:#FFFFFF;'">
			<block v-for="(item, index) in top_tab_list" :key="index">
				<view class="tab-item font30" @click="changeTopTab(item.id)">
					<text :class="top_tab_id == item.id?'fontw':''" :style="top_tab_id == item.id?'color:#E9564F;':'color:#111111;'">{{item.name}}</text>
					<view v-if="top_tab_id == item.id" class="tab-active-bottom-line" :style="'background:#E9564F'"></view>
				</view>
			</block>
		</view>
		<view class="list-index" :style="'background:#FFFFFF;'">
			<block v-for="(item, index) in 10" :key="index">
				<view class="list-item" :style="'border-bottom: 2rpx solid #E8E8E8;'">
					<view class="item-top font30 item-top-margin" :style="'color:#111111;'">
						<text>提现到微信</text>
						<text><text>-</text>10</text>
					</view>
					<view class="item-top font24" :style="'color:#AEAEAE;'">
						<text>2020/11/26 17:20:06</text>
						<text>提现成功</text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	var util = require('@/js/util.js')
	export default {
		data() {
			return {
				publicTextColor:'',
				publicimg:'',
				page:1,
				size:10,
				top_tab_id:1,
				top_tab_list:[
					{
						id:1,
						name:'全部'
					},
					{
						id:2,
						name:'提现待打款'
					},
					{
						id:3,
						name:'提现已打款'
					}
				]
			};
		},
		onShow() {
			this.getList()
			let that = this
			let aniosgaodu = 0
			uni.getSystemInfo({
				success: function(res) {
					console.log(res);
					that.zhuangtai = res.statusBarHeight;
					var a = res.model.split(' ');
					if (a[0] == 'iPhone') {
						aniosgaodu = 44;
					} else {
						aniosgaodu = 48;
					}
					that.zhuangtai = parseInt(that.zhuangtai)+4
					console.log(that.zhuangtai)
				}
			});
		},
		onLoad() {
			this.setcolorConfig()
		},
		onReachBottom() {
			this.page ++
			this.getList()
		},
		methods:{
			changeTopTab(id){
				this.top_tab_id = id
			},
			getList(){
				let _self = this
				uni.request({
					url: util.getUrl("cash/order"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
						page:_self.page,
						size:_self.size
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							if(_self.page == 1){
								_self.moneyList = res.data.data.list
							}else if(res.data.data.length <=0){
								_self.page --
							}else{
								for(let key in res.data.data.list){
									_self.moneyList.push(res.data.data.list[key])
								}
							}
						}
					},
				});
			},
			setcolorConfig(){
				this.publicTextColor = uni.getStorageSync("diyColor")
				this.publicimg = uni.getStorageSync("diyImg")
			},
		}
	}
</script>

<style lang="scss">
	.list-index{
		width: 690upx;
		padding: 0 30upx 30upx 30upx;
		display: flex;
		align-items: center;
		flex-direction: column;
		border-radius: 20upx;
		.list-item{
			width: 100%;
			display: flex;
			align-items: center;
			padding: 30upx 0;
			box-sizing: border-box;
			flex-direction: column;
			.item-top-margin{
				margin-bottom: 20upx;
			}
			.item-top{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
	.top-tab-list{
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 690upx;
		height: 80upx;
		border-radius: 20upx;
		margin-bottom: 20upx;
		.tab-item{
			display: flex;
			box-sizing: border-box;
			flex-direction: column;
			align-items: center;
			position: relative;
			.tab-active-bottom-line{
				width: 74upx;
				height: 4upx;
				position: absolute;
				bottom: -23upx;
			}
		}
	}
	.content{
		min-height: 100vh;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		padding: 30upx;
	}
</style>